<ng-container (keydown)="onCheckboxItemEmit($event)">
  @switch (type) {
    @default {
      <div
        #itemList
        [class.po-item-list__separator]="separator"
        [class.po-item-list__disabled]="disabled || !visible"
        [class.po-item-list__selected]="(selected || activeTabs) && !disabled"
        [class.po-item-list__hidden]="tabHide"
        [attr.aria-disabled]="disabled || !visible"
        [attr.aria-label]="label"
        [class.po-item-list__danger]="danger"
        class="po-item-list po-item-list__action"
      >
        @if (icon && iconPosition === 'left') {
          <po-icon
            class="po-popup-icon-item po-field-icon"
            [class.po-field-icon-aa]="size === 'small'"
            [p-icon]="icon"
          ></po-icon>
        }
        <span class="po-item-list-label">{{ label }}</span>

        @if (icon && iconPosition === 'right') {
          <po-icon class="po-popup-icon-item-right po-field-icon" [p-icon]="icon"></po-icon>
        }
      </div>
    }
    @case ('option') {
      <div
        #itemList
        class="po-item-list po-item-list__option"
        [class.po-item-list__separator]="separator"
        [class.po-item-list__selected]="selected && !disabled"
        [attr.aria-disabled]="disabled"
        [attr.aria-label]="label"
        (click)="onComboItem(item, $event)"
      >
        @if (!template) {
          @switch (keysLabel.length) {
            @case (0) {
              <span class="po-item-list-label" [innerHTML]="getLabelFormatted(label)"></span>
            }

            @case (1) {
              <span class="po-item-list-label">{{ item[keysLabel[0]] }}</span>
            }

            @case (2) {
              <div class="po-item-list-label po-item-list-label-group">
                <span class="po-item-list-label">{{ item[keysLabel[0]] }}</span>
                <span class="po-item-list-sublabel">{{ item[keysLabel[1]] }}</span>
              </div>
            }

            @default {
              <div class="po-item-list-label po-item-list-label-group">
                <span class="po-item-list-label">{{ item[keysLabel[0]] }}</span>
                <span class="po-item-list-sublabel">{{ item[keysLabel[1]] }} - {{ item[keysLabel[2]] }}</span>
              </div>
            }
          }
        }

        <ng-template
          [ngTemplateOutlet]="template?.templateRef"
          [ngTemplateOutletContext]="{ $implicit: templateContext }"
        >
        </ng-template>
      </div>
    }
    @case ('check') {
      <div
        class="po-item-list po-item-list__check"
        [class.po-item-list__separator]="separator"
        [class.po-item-list__selected]="selected && !disabled"
        [class.po-item-list__disabled]="disabled"
        [attr.aria-disabled]="disabled"
        [attr.aria-label]="label"
        (click)="onCheckboxItem()"
        (keydown)="onCheckboxItemEmit($event)"
        (keyup)="onCheckboxItemEmit($event)"
      >
        <po-checkbox
          [p-disabled-tabindex]="true"
          [p-checkboxValue]="checkboxValue === null ? 'mixed' : checkboxValue"
          [p-disabled]="disabled"
          [p-size]="size"
        ></po-checkbox>
        @if (!template) {
          <span class="po-item-list__label">{{ label }}</span>
        }
        <ng-template
          [ngTemplateOutlet]="template?.templateRef"
          [ngTemplateOutletContext]="{ $implicit: templateContext }"
        >
        </ng-template>
      </div>
    }
  }
</ng-container>
